class Magnifier
{
    constructor(el,options = {}) 
    {   // this指的是magnifier1和magnifier2
        this.el = document.querySelector(el)                     // 保存最大盒模型
        this.imgObj = this.el.querySelector('.img')              // 获取图片盒模型img
        this.maskObj = this.el.querySelector('.mask')            // 获取遮罩框mask
        this.enlargeObj = this.el.querySelector('.enlarge')      // 获取放大镜效果框enlarge
        this.init()                                              // 调用初始化插件
    }
    init() {
        this.overOut()                    // 鼠标在图片上移入移出显示与隐藏遮罩框mask和放大镜效果框enlarge
        this.maskMouseMove()                // 遮罩框mask和鼠标同步在图片上移动
        // this.changeEnlarge()           // 同步放大镜效果框enlarge，在移动事件里面调用过了，这里就不需要重复调用了
    }

    overOut() {        // this指的是magnifier1和magnifier2
        // 步骤：
        // 1、给【最大盒模型】里面的图片盒模型img绑定鼠标移入移出事件
        // 2、事件处理函数中---移入显示遮罩框mask和放大镜效果框enlarge、移出隐藏遮罩框mask和放大镜效果框enlarge
        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display ='block'         
        //事件函数改成箭头函数，改变this指向为实例化对象magnifier1和magnifier2，两个都是等于block也可以简写，函数大括号只有一行代码可以简写
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display ='none'        
        //事件函数改成箭头函数，改变this指向为实例化对象magnifier1和magnifier2，两个都是等于block也可以简写，函数大括号只有一行代码可以简写
    }
    maskMouseMove() {         // this指的是magnifier1和magnifier2
        // 步骤：
        // 1、给最大盒模型里面的img图片盒模型绑定鼠标移动事件
        this.imgObj.onmousemove = (evt) => {     // 事件函数this是指事件源，此时需要改变this指向为实例化对象，所以需要改成箭头函数
            // 2、事件处理函数中---获取事件对象
            let e = evt || window.event
            // 3、事件处理函数中---确定鼠标位置【让鼠标在遮罩框的中间】
            let x = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let y = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2
            // 4、事件处理函数中---给移动的范围假限制
            if(x<0) x=0
            if(y<0) y=0
            let maxX = this.imgObj.offsetWidth - this.maskObj.offsetWidth
            let maxY = this.imgObj.offsetHeight - this.maskObj.offsetHeight
            if(x>maxX) x=maxX
            if(y>maxY) y=maxY
            // 5、事件处理函数中---同步遮罩框移动
            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top = y + 'px'
            // 6、事件处理函数中---同步放大镜效果框
            this.changeEnlarge(x,y)
        }

    }
    changeEnlarge(x,y) {         // this指的是magnifier1和magnifier2
        this.enlargeObj.style.backgroundPosition = `-${x*2}px -${y*2}px`
    }
}

export default Magnifier